/* table of contents */
/*

I. Global elements

- General
- Headings
- Buttons
- Messages
- Overlay
- Dialog
- Tooltip
- Table
- Form elements
- Fieldsets
- Tabs
- Date picker
- Rounded corners
- Icons

II. Specific elements

- Log In
- Header
- Sidebar
- Content
- Title bar
- Toolbar
- Post list



*/


/*--------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------- GLOBAL ELEMENTS -------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/

/**************************************/
/*              GENERAL               */
/**************************************/

@base: #444444;
@header:#333333;
@sidebar: #FFF;
@subSideBar:gray;

@headerBorderShadow: #333333;
@mainBoarderShadow: rgb(204, 197, 201);
@sideBarShadow: rgb(204, 197, 201);

@aNormal: #16aec5;
@li:#cfc5c5;
@liInnerA:#cfc5c5;
@aActive:#ffffff;
@message:#3d3333;
@btnText:#FFF;

@errorMessageBorder:#d99d9d;
@successMessageBorder:#9bdea8;
@noticeMessageBorder:#e8e657;

@sidebarBorder:#e8e657;
@inputBorder:#ccc;
@input:lightcyan;

@dialogueOverlay:#000;
@highlightSpanText:#005580;
@dialogueBox:#fff;
@tableHover:lightsteelblue;

/* Global */
body {
  color:#333;
  font-family:  SimSun,  Arial, Helvetica, sans-serif;
  background: @base;
}

a {
  color:@aNormal;
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

//select {
//  background-color: @input;
//}
//
//input[type="text"], input[type="password"]{
//  background-color: @input !important;
//}
//
//.control-group.error input {
//  background-color: #d99d9d;
//}

/* main container */ //覆盖bootstrap .container
.container {
  width:100%;
  margin:0px auto;
}

#content {
  background: none repeat scroll 0 0 #eeeeee;
  margin-left: 220px;
  margin-right: 0;
  padding-bottom: 25px;
  position: relative;
  min-height: 500px;
  width: auto;
  border-top-left-radius: 8px;
}

/**************************************/
/*             crumb               */
/**************************************/
/* Breadcrumb */
#breadcrumb {
  background-color: #e5e5e5;
  box-shadow: 0 0 1px #ffffff;
  border-top: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  padding-left: 10px;
}
#breadcrumb a {
  padding: 8px 20px 8px 10px;
  display: inline-block;
  background-image: url('../img/breadcrumb.png');
  background-position: center right;
  background-repeat: no-repeat;
  font-size: 11px;
  color: #666666;
}
#breadcrumb a:hover {
  color: #333333;
}
#breadcrumb a:last-child {
  background-image:none;
}
#breadcrumb a.current {
  font-weight: bold;
  color: #444444;
}
#breadcrumb a i {
  margin-right: 5px;
  opacity: .6;
}
#breadcrumb a:hover i {
  margin-right: 5px;
  opacity: .8;
}

/**************************************/
/*              BUTTONS               */
/**************************************/

/**************************************/
/*              MESSAGES              */
/**************************************/

#m-loginForm .controls div.help-inline {
  display:block;
  text-align: left;
  padding-left: 120px;
}

/**************************************/
/*              OVERLAY  	          */
/**************************************/
/**************************************/
/*               TABLE                */
/**************************************/

/**************************************/
/*            FORM ELEMENTS           */
/**************************************/
.content .field label {
  float:left;
  text-align:right;
  width:120px;
  margin-right:10px;
  cursor:pointer;
  margin-top: 2px;
}
.content input.text,  .content textarea {
  border:@inputBorder 1px solid;
  //background-color: @input;
  width:130px;
  padding:0px;
  border-radius:5px;
  margin:0;
}
/**************************************/
/*             FIELDSETS              */
/**************************************/
textarea {
  height:200px;
  width:500px;
}

.content form .field {
  overflow:hidden;
  padding:4px 0px;
  margin-right:2px;
}

/**************************************/
/*            SYSTEM HEADER                */
/**************************************/
#header {
  border-bottom: 1px solid #555555;
  height: 77px;
  position: relative;
  width: 100%;
  z-index: -9;
}

#header .loginInfos {
  float:left;
  color:#FFFFFF;
  font-size:28px;
  padding-top:30px;
  padding-left:5px;
}

/**************************************/
/*            CONTENT HEADER                */
/**************************************/
#content-header {
  background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#FFFFFF), to(#EEEEEE));
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
  background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
  background-image: -o-linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
  background-image: linear-gradient(top, #FFFFFF 0%, #EEEEEE 100%);
  border-top-left-radius: 8px;
  height: 50px;
  width: 100%;
  margin-top: -43px;
  z-index: 20;
  border-bottom: 1px solid #e5e5e5;
}

#content-header h1 {
  color: #555555;
  font-size: 28px;
  font-weight: normal;
  float: left;
  text-shadow: 0 1px 0 #ffffff;
  margin-left: 20px;
  position: absolute;
}

#content-header h1, #content-header .btn-group {
  margin-top:5px;
}


/**************************************/
/*            Sidebar Navigation                */
/**************************************/
#sidebar {
  display: block;
  float: left;
  position: relative;
  width: 220px;
  z-index: 16;
}

#sidebar > ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  position: absolute;
  width: 220px;
  border-top: 1px solid #393939;
  border-bottom: 1px solid #4E4E4E;
}

#sidebar > ul > li {
  border-top: 1px solid #4E4E4E;
  border-bottom: 1px solid #393939;
}
#sidebar > ul > li.active {
  background-color: #3a3a3a;
  background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#333333), to(#3F3F3F));
  background-image: -webkit-linear-gradient(top, #333333 0%, #3F3F3F 100%);
  background-image: -moz-linear-gradient(top, #333333 0%, #3F3F3F 100%);
  background-image: -ms-linear-gradient(top, #333333 0%, #3F3F3F 100%);
  background-image: -o-linear-gradient(top, #333333 0%, #3F3F3F 100%);
  background-image: linear-gradient(top, #333333 0%, #3F3F3F 100%);
}

//link start
#sidebar > ul > li > a {
  padding: 10px 0 10px 15px;
  display: block;
  color: #AAAAAA;
}

#sidebar > ul > li > a:hover {
  background-color: #4A4A4A;
}

//link 内 i
#sidebar > ul > li > a > i {
  margin-right: 10px;
}

#user-nav > ul > li > a > i, #sidebar li a i {
  vertical-align: top;
  background-image: url('../img/glyphicons-halflings-white.png');
  opacity: .5;
  margin-top: 2px;
}
//link 内 .label
#sidebar > ul > li > a > .label {
  background-color: #333333;
}

#sidebar > ul > li > a > .label {
  margin: 0 20px 0 0;
  float: right;
  padding: 3px 5px 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset, 0 1px 0 rgba(255,255,255,0.2);
}
//link end


#sidebar > ul > li.open.submenu > a {
  border-bottom: 1px solid #393939;
}
#sidebar > ul > li.open.active.submenu > a {
  border-bottom: 1px solid #2A2A2A;
}

//子
#sidebar > ul li ul {
  display: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 0 3px rgba(0,0,0,0.5) inset;
}
#sidebar > ul li.open>ul {
  display: block;
}

#sidebar > ul ul {
  border-top: 1px solid #4E4E4E;
  background-color: #2A2A2A;
}

#sidebar > ul li ul li {
  color:@li;
}

#sidebar > ul ul li a {
  border-top: 1px solid #333333;
  border-bottom: 1px solid #202020;
  padding: 10px 0 10px 25px;
  display: block;
  color: #777777;
}

#sidebar > ul ul li a:hover, #sidebar > ul ul li.active a {
  color: #CCCCCC;
  background-color: #272727;
}

#sidebar > ul > li.open >ul> li.active > a {
  background: url("../img/menu-active.png") no-repeat scroll right center transparent !important;
}

#sidebar > ul ul li:first-child a {
  border-top: 0;
}
#sidebar > ul ul li:last-child a {
  border-bottom: 0;
}

/**************************************/
/*              USEFUL	              */
/**************************************/

.topCircleBorder{
  border: 1px solid #ddd;
  border-collapse: separate;
  border-left: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-left:1px solid #ddd;
}

.formLayOut {
  float: left;
}

.rightLayOut {
  float: right;
}

.modifyPadding {
  padding-bottom: 10px;
}
.marginBottom5 {
  margin-bottom: 5px;
}

.paddingTop10{
  padding-top:10px;
}

.paddingBottom10{
  padding-bottom:10px;
}
.paddingRight10{
  padding-right:10px;
}

.paddingLeft20 {
  padding-left: 20px;
}

.marginTop20 {
  margin-top:10px;
}
//todo learn  	display:table; 	display:table-cell;
.sub {
  padding:10px;
}
.no-margin, .container .no-margin {
  margin:0;
}
.no-padding .container .no-padding {
  padding:0;
}

.marginLeft60{
  margin-left:60px;
}

.displayBlock {
  display:block;
}

/**************************************/
/*          nav          */

#user-nav {
  position: absolute;
  right: 30px;
  top: 5px;
  z-index: 20;
  margin: 0;
}

.navbar .nav>li>a {
  margin: 0;
  padding: 0;
}

/**************************************/
/*          TRIPOLI OVERRIDE          */
/**************************************/

/** sub-sidebar **/
.sub-sidebar, .sub-sidebar-form{
  position: absolute;
  margin: 0px;
  padding: 0px;
  top: 15px;
  left: 90%;
  background: @subSideBar;
  list-style: none;
  z-index: 99;
  min-width: 80px;
  display: none;
  white-space: nowrap;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  border: 1px solid #CDCDCD;
  opacity: 0.9;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
.sub-sidebar-form{
  padding-bottom: 10px;
}

.sub-sidebar:before, .sub-sidebar:after,
.sub-sidebar-form:before, .sub-sidebar-form:after{
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.sub-sidebar:after{
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #FFFFFF;
  border-width: 10px;
  top: 50%;
  margin-top: -10px;
}
.sub-sidebar-form:after{
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #FFFFFF;
  border-width: 10px;
  top: 20px;
  margin-top: -10px;
}
.sub-sidebar:before{
  border-color: rgba(215, 215, 215, 0);
  border-right-color: #CDCDCD;
  border-width: 11px;
  top: 50%;
  margin-top: -11px;
}
.sub-sidebar-form:before{
  border-color: rgba(215, 215, 215, 0);
  border-right-color: #CDCDCD;
  border-width: 11px;
  top: 20px;
  margin-top: -11px;
}

.sub-sidebar > li{
  position: relative;
  margin: 0px;
  padding: 5px 0px 0px 0px;
  list-style: none;
  display: inline-block;
  text-align: center;
  font-size: 11px;
  color: #626262;
  width: 60px;
}

.sub-sidebar li a{
  color: #626262;
}
.sub-sidebar li:hover a,
.sub-sidebar li.active a{
  color: #008299;
}
.sub-sidebar li.divider{
  height: 53px;
  width: 2px;
  margin-top: -12px;
  margin-bottom: -11px;
  border-right: 1px solid #FFFFFF;
  border-left: 1px solid #CDCDCD;
}
.sub-sidebar-form > li{
  position: relative;
  margin: 0px;
  padding: 5px 10px 2px 10px;
  list-style: none;
  display: block;
  font-size: 1.2em;
  color: #626262;
  min-width: 120px;
  text-align: left;
}

.sub-sidebar > li a,
.sub-sidebar-form > li a{
  display: block;
  padding: 5px;
  color: #626262;
}
.sub-sidebar-form > li > a i,
.sub-sidebar-form > li > a .sidebar-text{
  color: #626262;
}
.sub-sidebar-form > li > a:hover i,
.sub-sidebar-form > li > a:hover .sidebar-text,
.sub-sidebar-form > li.active > a i,
.sub-sidebar-form > li.active > a .sidebar-text{
  color: #FFFFFF;
}
.sub-sidebar-form > li > a:hover,
.sub-sidebar-form > li.active > a{
  color: #FFFFFF;
  text-decoration: none;
  background-color: #00a0b1;
  background-image: -moz-linear-gradient(top, #00a0b1, #008299);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00a0b1), to(#008299));
  background-image: -webkit-linear-gradient(top, #00a0b1, #008299);
  background-image: -o-linear-gradient(top, #00a0b1, #008299);
  background-image: linear-gradient(to bottom, #00a0b1, #008299);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00a0b1', endColorstr='#ff008299', GradientType=0);
}
/** end sub-sidebar**/

/*this block for display sub-sidebar if any*/
#sidebar > ul >li.open>ul li:hover ul{
  display: block;
}

/*table */
.tableFixed {
  table-layout:fixed
}

/*table in button*/
.innerButtons {
  margin-left: 4px;
  padding: 0px
}

/*pagination*/

.pageInput {
  display: inline;
  float: left;
  margin:2px 5px 0 10px;
  width:40px;
  height:30px;
}

.totalpages {
  display: inline;
  float: left;
  margin:4px 10px 0 0;
}

/*hover变色 .table-striped tbody tr:nth-child(odd) td 把td去除*/
.table-striped tbody tr:hover {
  background-color: @tableHover !important;
}

#sidebar li ul li.secondSideBarLi {
  margin: 2px 5px;
  padding: 0px 0px;
  display: inline-block;
  min-width: 80px;
}

.fireText {
  font-weight: bold;
  color: @highlightSpanText;
}

.addButtonSize {
  width: 80px;
}

.selectWidthSameText {
  width:206px;
}

.smallInputText {
  width:40px;
}

.bottomMargin20{
  margin:20px 0;
}

.addButtonMarginLeft {
  margin-left: 357px
}

.importantColor {
  color:red;
}

.selectCustomer {
  width: 130px;
  height:26px;
  margin-bottom: 0px;
}








